<template>
  <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
    <a-form-item label="父级分类">
      <a-select v-model:value="modelRef.parent" placeholder="please select your parent category">
        <a-select-opt-group label="顶级分类">
          <a-select-option v-for="item in data.resource.parentCate" :key="item._id" :value="item._id">
            {{ item.name }}
          </a-select-option>
        </a-select-opt-group>
        <a-select-opt-group label="子级分类">
          <a-select-option v-for="item in data.resource.childCate" :key="item._id" :value="item._id">
            {{ item.name }}
          </a-select-option>
        </a-select-opt-group>
      </a-select>
    </a-form-item>
    <a-form-item label="分类名称" v-bind="validateInfos.name">
      <a-input v-model:value="modelRef.name" />
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary" @click="onSubmit">
        {{ id ? 'Edit' : 'Create' }}
      </a-button>
    </a-form-item>
  </a-form>
</template>
<script>
// import Router from '../router'
import { reactive, toRaw, getCurrentInstance, onMounted } from 'vue'
import { useForm } from '@ant-design-vue/use'
import {
  ResourcePost,
  ResourceGetById,
  ResourceUpdate,
  GetSecCate
} from '../ceshi.js'
export default {
  props: ['id'],
  setup (props, ctx) {
    // console.log(props.id)
    // 表单元素
    const modelRef = reactive({
      name: '',
      parent: ''
    })
    // 表单校验规则
    const rulesRef = reactive({
      name: [
        {
          required: true,
          message: 'Please input name'
        }
      ]
    })
    // ant design 校验
    const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef)
    const instance = getCurrentInstance()
    // 提交事件
    const onSubmit = e => {
      e.preventDefault()
      validate()
        .then(() => {
          // console.log(instance.ctx.$http)
          // console.log(toRaw(modelRef))
          if (props.id) {
            ResourceUpdate('categories', props.id, toRaw(modelRef)).then(
              res => {
                console.log(res)
              }
            )
            // console.log(toRaw(modelRef))
          } else {
            ResourcePost('categories', toRaw(modelRef)).then(res => {
              console.log(res)
            })
          }

          instance.ctx.$message.success(
            `${props.id ? '修改成功!' : '创建成功！'}`
          )
          // Router.push('/category/list')
        })
        .catch(err => {
          console.log('error', err)
        })
    }

    const data = reactive({
      resource: []
    })
    // 获取当前所有的表单数据，利于显示父级分类
    onMounted(async () => {
      const cates = await GetSecCate()
      data.resource = cates.data
      if (props.id) {
        const res = await ResourceGetById('categories', props.id)
        modelRef.name = res.data.name
        modelRef.parent = res.data.parent?._id
      }
    })
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      modelRef,
      onSubmit,
      resetFields,
      validateInfos,
      data
    }
  }
}
</script>
